function showTrending(dat, n) {
    const canvas = document.getElementById('history-trending--content-canvas')
    if (!canvas) {
        return
    }
    const ctx = canvas.getContext('2d')

    let padding = 0 // 表格间距
    let firstColWidth = 70 // 第一列宽
    let cellWidth = 20
    let cellHeight = 20
    let width = 0,
        height = 0
    let border = 1

    const cols = n, rows = dat.length + 1

    // 计算总画布宽度
    width += 2 * padding
    height += 2 * padding

    width += firstColWidth
    for (let i = 0; i < cols; ++i) {
        width += cellWidth
    }
    for (let i = 0; i < rows; ++i) {
        height += cellHeight
    }

    let rate = 1

    if (width < 500) {
        rate = 3
    } else if (width > 700) {
        rate = 1.5
    }

    width *= rate
    height *= rate
    firstColWidth *= rate
    cellWidth *= rate
    cellHeight *= rate
    padding *= rate
    border *= rate

    document.getElementById('history-trending--content').style.width = width + 'px'

    canvas.width = width
    canvas.height = height

    canvas.parentNode.scrollTop = height

    ctx.clearRect(0, 0, width, height)

    const tableWidth = width - 2 * padding,
        tableHeight = height - 2 * padding
    const perCol = (tableWidth - firstColWidth) / cols

    // 画表格
    ctx.render(ctx => {
        ctx.lineWidth = border
        ctx.strokeStyle = 'black'
        ctx.moveTo(padding, padding)
        ctx.lineTo(width - padding, padding)
        ctx.lineTo(width - padding, height - padding)
        ctx.lineTo(padding, height - padding)
        ctx.lineTo(padding, padding)

        for (let ix = firstColWidth; ix <= tableWidth; ix += perCol) {
            ctx.moveTo(ix + padding, padding)
            ctx.lineTo(ix + padding, height - padding)
        }

        for (let iy = cellHeight; iy <= tableHeight; iy += cellHeight) {
            ctx.moveTo(padding, iy + padding)
            ctx.lineTo(width - padding, iy + padding)
        }

        ctx.stroke()
    })

    // 画值
    ctx.render(ctx => {
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
            // 画表头
        ctx.render(ctx => {
            ctx.font = 'bolder ' + 8 * rate + 'px sans-serif'
            ctx.fillText('Дата', padding + firstColWidth / 2, padding + cellHeight / 2)
            let n = 1
            for (let ix = firstColWidth; ix < tableWidth; ix += perCol) {
                ctx.fillText(n++ + '', ix + padding + cellWidth / 2, padding + cellHeight / 2)
            }
        })

        ctx.render(ctx => {
            ctx.font = 8 * rate + 'px sans-serif'
            for (let i = 1; i <= dat.length; ++i) {
                ctx.fillStyle = 'black'
                let row = dat[i - 1]
                ctx.fillText(moment(row.d).format('D MMM YYYY'), padding + firstColWidth / 2, padding + cellHeight / 2 + cellHeight * i + 1)
                let ix = firstColWidth
                let values = []
                if(row.v === null) {
                    values = row.c
                } else {
                    values = Array(row.v).fill().map((v, k) => k+1)
                }
                for (let num of values) {
                    if (row.c && row.c.includes(num)) {
                        ctx.render(ctx => {
                            ctx.fillStyle = 'rgb(0,153,255)'
                            ctx.strokeStyle = 'rgb(15,120,255)'
                            draw_circle(ctx, 8 * rate, ix + padding + cellWidth / 2, padding + cellHeight / 2 + cellHeight * i)
                        })
                        ctx.fillStyle = 'white'
                        ctx.fillText(num + '', ix + padding + cellWidth / 2, padding + cellHeight / 2 + cellHeight * i + 1)
                    } else if (row.s && row.s.includes(num)) {
                        ctx.render(ctx => {
                            ctx.fillStyle = 'rgb(255,186,11)'
                            ctx.strokeStyle = 'rgb(255,173,30)'
                            draw_start(ctx, 5 * rate, 9 * rate, ix + padding + cellWidth / 2, padding + cellHeight / 2 + cellHeight * i)
                        })
                        ctx.fillStyle = 'white'
                        ctx.fillText(num + '', ix + padding + cellWidth / 2, padding + cellHeight / 2 + cellHeight * i + 1)
                    } else {
                        // ctx.fillStyle = 'black'
                    }
                    ix += perCol
                }
            }
        })
    })
}